<template>
  <div class="app-container" align="center">
    <el-tree
      :default-expand-all="true"
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    >
      <div slot-scope="{ data }" class="custom-tree-node">
        <div class="left">
          <span>{{ data.name }}</span>
        </div>
        <div class="right">
          <span class="managerName">{{ data.managerName }}</span>
          <el-dropdown @command="handleCommand($event,data.id)">
            <!-- element-ui的@command事件原理：事件委托 -->
            <span class="el-dropdown-link">
              操作
              <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item command="add">添加子部门</el-dropdown-item> -->
              <el-dropdown-item @click.native="addDepartment(data.id)">添加子部门</el-dropdown-item>
              <!-- <el-dropdown-item command="edit">编辑</el-dropdown-item> -->
              <el-dropdown-item @click.native="editDepartment(data)">编辑</el-dropdown-item>
              <el-dropdown-item command="del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-tree>
    <!-- 新增或编辑 -->
    <!-- <Modal /> -->
    <!-- <Modal ref="modal" @refresh="getDepartmentList" /> -->
    <Modal ref="modal" :data="oData" @refresh="getDepartmentList" />
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { getDepartmentList, delDepartment, addDepartment } from '@/api/department'
// import { dataToTree, dataToTree2 } from '@/utils/tools'
import { dataToTree2 } from '@/utils/tools'
import Modal from './components/modal.vue'
export default {
  name: 'Department',
  components: { Modal },
  data() {
    return {
      // 原始数据
      oData: [],
      // 处理后的tree解构数据
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getDepartmentList()
    // this.dataToTree()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
      console.log('handleNodeClick')
    },
    addDepartment(id) {
      this.$refs.modal.add(id)
    },
    editDepartment(data) {
      this.$refs.modal.edit(data)
    },
    async getDepartmentList() {
      const { data } = await getDepartmentList()
      // console.log(data)
      // this.data = dataToTree(data)
      // 保存原始数据
      this.oData = data
      // 保存处理后的数据
      this.data = dataToTree2(data)
    },
    // handleCommand(command, id) {
    //   switch (command) {
    //     case 'del': this.delDepartment(id); break
    //     case 'add': this.addDepartment(id); break
    //   }
    // },
    async delDepartment(id) {
      await delDepartment(id)
      // 删除成功后进行提示，并且刷新数据
      this.$message.success('删除成功！')
      // 刷新数据
      this.getDepartmentList()
    }
  },
  method() {
    this.delDepartment()
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 30px 150px;
  font-size: 14px;
}
.custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .managerName {
    margin-right: 20px;
  }
}
</style>
